/* 多端适配样式 */

/* H5端适配 */
/* #ifdef H5 */
.h5-only {
  display: block;
}

.mp-only, .app-only {
  display: none;
}

/* H5端导航栏适配 */
.custom-navbar {
  /* H5端需要考虑浏览器地址栏 */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

/* H5端安全区域适配 */
.safe-area-inset-bottom {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

/* H5端滚动优化 */
.scroll-view {
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

/* H5端点击态优化 */
.clickable {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* #endif */

/* 微信小程序端适配 */
/* #ifdef MP-WEIXIN */
.mp-only {
  display: block;
}

.h5-only, .app-only {
  display: none;
}

/* 小程序端导航栏适配 */
.custom-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

/* 小程序端安全区域适配 */
.safe-area-inset-bottom {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

/* 小程序端滚动优化 */
.scroll-view {
  scroll-behavior: smooth;
}

/* 小程序端按钮适配 */
.button-hover {
  background-color: rgba(0, 0, 0, 0.1);
}
/* #endif */

/* APP端适配 */
/* #ifdef APP-PLUS */
.app-only {
  display: block;
}

.h5-only, .mp-only {
  display: none;
}

/* APP端状态栏适配 */
.status-bar {
  height: var(--status-bar-height);
}

/* APP端导航栏适配 */
.custom-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

/* APP端安全区域适配 */
.safe-area-inset-bottom {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

/* APP端原生组件层级 */
.native-component {
  z-index: 999;
}
/* #endif */

/* 通用响应式适配 */
@media screen and (max-width: 750rpx) {
  .responsive-grid {
    grid-template-columns: 1fr;
  }
  
  .responsive-flex {
    flex-direction: column;
  }
  
  .responsive-text {
    font-size: 28rpx;
  }
}

@media screen and (min-width: 751rpx) and (max-width: 1200rpx) {
  .responsive-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .responsive-text {
    font-size: 32rpx;
  }
}

@media screen and (min-width: 1201rpx) {
  .responsive-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .responsive-text {
    font-size: 36rpx;
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .dark-mode-adaptive {
    background-color: #1a1a1a;
    color: #ffffff;
  }
  
  .modern-card {
    background-color: #2a2a2a;
    border-color: #3a3a3a;
  }
  
  .glass-card {
    background: rgba(42, 42, 42, 0.8);
    backdrop-filter: blur(10px);
  }
}

/* 高对比度模式适配 */
@media (prefers-contrast: high) {
  .high-contrast {
    border: 2px solid currentColor;
  }
  
  .gradient-bg {
    background: currentColor !important;
  }
}

/* 减少动画模式适配 */
@media (prefers-reduced-motion: reduce) {
  .animated-gradient-text,
  .floating-animation,
  .fade-in-up {
    animation: none !important;
    transition: none !important;
  }
}

/* 字体大小适配 */
.font-size-small {
  font-size: 24rpx;
}

.font-size-normal {
  font-size: 28rpx;
}

.font-size-large {
  font-size: 32rpx;
}

.font-size-xlarge {
  font-size: 36rpx;
}

/* 间距适配 */
.spacing-small {
  padding: 10rpx;
  margin: 10rpx;
}

.spacing-normal {
  padding: 20rpx;
  margin: 20rpx;
}

.spacing-large {
  padding: 30rpx;
  margin: 30rpx;
}

/* 圆角适配 */
.border-radius-small {
  border-radius: 8rpx;
}

.border-radius-normal {
  border-radius: 15rpx;
}

.border-radius-large {
  border-radius: 25rpx;
}

/* 阴影适配 */
.shadow-small {
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.shadow-normal {
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.shadow-large {
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
}

/* 性能优化相关样式 */
.gpu-accelerated {
  transform: translateZ(0);
  will-change: transform;
}

.lazy-load-placeholder {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* 无障碍适配 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.focus-visible {
  outline: 2px solid #667eea;
  outline-offset: 2px;
}

/* 打印样式适配 */
@media print {
  .no-print {
    display: none !important;
  }
  
  .print-only {
    display: block !important;
  }
  
  .modern-card {
    box-shadow: none;
    border: 1px solid #ccc;
  }
}